<!-- 能源数据 -->
<template>
  <div class="data-container">
    <div class="content flex-center">
      <div class="content-left">
        <div class="tree-title">能源消耗量</div>
        <div class="tree-search">
          <px-input v-model="treeSearchVal" placeholder="请输入" :prefix-icon="Search" />
        </div>
        <div class="tree-bar">
          <px-tree
            ref="treeRef"
            :data="treeData"
            node-key="id"
            default-expand-all
            highlight-current
            :current-node-key="currentNode"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          />
        </div>
      </div>
      <div class="content-right">
        <div v-if="currentNode === 1">
          <Steam />
        </div>
        <div v-if="currentNode === 2">
          <HotWater />
        </div>
        <div v-if="currentNode === 3">
          <NaturalGas />
        </div>
        <div v-if="currentNode === 4">
          <BulkGas />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, watch } from "vue";
import { Search } from "@px-ui/icons-vue";
import Steam from "./component/steam.vue";
import HotWater from "./component/hotWater.vue";
import NaturalGas from "./component/naturalGas.vue";
import BulkGas from "./component/bulkGas.vue";

defineOptions({
  name: "ALL_ENERGY_DATA"
});

const treeRef = ref(null);

const state = reactive({
  treeSearchVal: "",
  treeData: [
    {
      id: 0,
      label: "能源消耗量",
      children: [
        {
          id: 1,
          label: "蒸汽",
          children: []
        },
        {
          id: 2,
          label: "热水",
          children: []
        },
        {
          id: 3,
          label: "天然气",
          children: []
        },
        {
          id: 4,
          label: "大宗气",
          children: []
        }
      ]
    }
  ],
  currentNode: 1
});
const { treeSearchVal, treeData, currentNode } = toRefs(state);

watch(
  () => state.treeSearchVal,
  val => {
    treeRef.value.filter(val);
  }
);

const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};

const handleNodeClick = (data, node, obj) => {
  if (data.children.length > 0) {
    return;
  }
  state.currentNode = data.id;
};
</script>

<style lang="scss" scoped>
@import url("@/views/common/energy/energyData/scss/common.scss");

.content {
  width: 100%;
  height: 100%;

  .content-left {
    width: 316px;
    height: 100%;
    overflow-y: auto;
    border: 1px solid #dfdfdf;
    border-radius: 4px;

    .tree-title {
      padding: 8px 8px 0;
      font-size: 14px;
      font-weight: bold;
    }

    .tree-search {
      padding: 8px;
    }

    .tree-bar {
      width: 100%;
      height: calc(100vh - 280px);
      overflow-y: auto;
    }
  }

  .content-right {
    width: calc(100% - 316px);
    height: 100%;
    padding-left: 18px;
  }
}
</style>
